<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/res/css/style.css" />
    <script src="/res/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<script>
    $(function (){
        $("#btn_login").on("click",function (){
            //传过来的参数名一定要和对象中的属性名一模一样
            let data = {
                username:$("#userNameLogin").val(),
                userpwd:$("#pwdLogin").val()
            }
            console.info(data);
            let url = "/dbUser/findLoginName";
            $.post(url,data,function (resp){
                console.info("传过来的对象是",resp);
                if(resp.state==1){
                    let user = resp.msg;
                    //将会员信息放入到session,只能放入str，JSON.stringify（json对象）将json对象转化为字符串
                    sessionStorage.setItem("user", JSON.stringify(user));//当浏览器关闭时，清空session
                    window.open("product.html");//待更换
                    console.info("获得的user是",user);
                }else {
                    $(".verification").text("用户名或密码错误！");
                }
            },"json")
        })

       $("#btn_ok").on("click",function (){
           let url="/dbUser/add";
           //将表单的字符串数据封装，不能用户上传文件
           let data = $("#registForm").serialize();
           console.info("表单数据",data);
           $.post(url,data,function (resp){
               if(resp.state==1){
                   $(".resetbtn").click();
                   $(".verification").text("注册成功！请登录");
               }
           },"json")
       })

       $("#userNameRegist").on("blur",function (){
           let url = "/dbUser/findByName";
           let userName = $("#userNameRegist").val();
           console.info(userName);
           let data = {username: userName};
           $.post(url,data,function (resp){
                if(resp.state==1){
                    $(".verification").css("color","green");
                    $(".verification").text(resp.msg);
                }else {
                    $(".verification").css("color","red");
                    $(".verification").text(resp.msg);
                }
           },"json")
       })
    })
</script>
<div class="container">
    <div class="main">
        <div class="bg"></div>
        <form class="formone" action="/" method="get">
            <div class="title">登 录</div>
            <div class="username"><input type="text" name="username" id="userNameLogin" v-model="username" value="" placeholder="请输入账号" /></div>
            <div class="password"><input type="password" name="userpwd" v-model="password" id="pwdLogin" value="" placeholder="请输入密码" /></div>
            <div class="verification" ></div>
            <div class="loginbtn">
                <div class="btnbg" id="btn_login">登录</div><button type="button">登录</button>
            </div>
            <div class="registerbtn">
                <div class="btnbg" id="btn_regist">注册</div><button type="button" >注册</button>
            </div>
        </form>
        <div class="registerpage">
            <form class="formtwo" action="/" method="" id="registForm">
                <div class="registertitle">注册</div>
                <div class="saveName"><input type="text" name="username" id="userNameRegist" placeholder="请输入账号"/></div>
                <div class="savePassword"><input type="password" name="userpwd" id="PwdRegist" placeholder="请输入密码"/></div>
                <div class="verification" ></div>
                <div class="btn_list">
                    <div class="okbtn" id="btn_ok"><button type="button">确认</button></div>
                    <div class="resetbtn"><button type="button">撤销</button></div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    let formone=document.querySelector('.formone');
    let registerpage=document.querySelector('.registerpage');
    let registerbtn=document.querySelector('.registerbtn');
    let resetbtn=document.querySelector('.resetbtn');
    registerbtn.addEventListener("click",()=>{
        formone.style.display='none';
        registerpage.style.display="flex";
    })
    resetbtn.addEventListener("click",()=>{
        formone.style.display='flex';
        registerpage.style.display="none";
    })
</script>
</html>